<template>
	<view>
		<nav-bar title="项目预约"></nav-bar>
		<scroll-view scroll-y :style="{ height: mainHeight }" class="contain">
			<view class="time-box">
				<scroll-view :scroll-x="true" class="date-box">
					<view class="date-list">
						<view v-for="(item, index) in same_week"
							:class="['date-item', activeIndex === index ? 'active' : 'no-active']"
							@click="dateSelect(item, index)" :key='index'>
							<view class="day">{{ item.name.split('/')[1] }}</view>
							<view class="week">{{ item.week }}</view>
						</view>
					</view>
				</scroll-view>
				<view v-if="isLoading" class="common-loading">
					<image class="loading-img" :src="baseIconUrl + 'icon_loading.png'" />
				</view>
				<view class="time-data" v-else-if="timeDesData && timeDesData.length">
					<view class="time-des" v-for="(item, index) in timeDesData" :key="index"
						@click="timeSelectClick(item, index)" :style="activeTimeIndex === index ?
              'color:#c27e15;font-weight:bold' :
              index < firstTimeIndex || activeTimeIndex === -1 || item.status !== '空闲' ? 'color:#aaa' :
              'color:#666'">{{ item.time }}</view>
				</view>
				<view v-else class="common-no-data">
					<image class="no-data-img" :src="baseImgUrl + 'img_no_project.png'" alt="" />
					<view class="text">该技师今日无班次信息</view>
				</view>
			</view>
		</scroll-view>
		<view class="btn_edit">
			<view class="btn_cont" @click="toNext">
				下一步
			</view>
		</view>
	</view>
</template>

<script>
	import NavBar from "../../components/nav-bar"
	import Search from '../../components/search/index'
	import shopList from "@/subPages/components/shopList"
	import api_technician from '@/api/technician'
	import pageConfig from '@/config'
	export default {
		name: "ReserveTime",
		components: {
			NavBar,
			Search,
			shopList
		},
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {
				baseImgUrl: pageConfig.baseImgUrl,
				baseIconUrl: pageConfig.baseIconUrl,
				mainHeight: '',
				transferData: {},
				actionHeight: '',
				activeIndex: 0,
				activeTimeIndex: 0,
				firstTimeIndex: 0,
				reserveDate: '',
				reserveTime: '',
				years,
				year,
				months,
				month,
				days,
				day,
				visible: true,
				show: false,
				week: [],
				same_week: [], // 保存当前最新的时间
				same_day: '', // 当天的时间
				timeDesData: [],
				isLoading: false
			}
		},
		created() {
			this.mainHeight = this.$store.getters.heightData.noTabMainHeight
			this.actionHeight = this.$store.getters.heightData.mainSearchHeight.split("px")[0] - 250 + "px"
			let data = []
			this.start = this.getDay(+7)
			this.end = this.getDay()
			for (let i = 6; i >= 0; i--) {
				data.push(this.getDay(+i))
			}
			var date = data.reverse() // 得出一周的日期进行排序
			this.week = date
			var date = this.week
			var pkc = []; /* 用于存储展示的日期数据 */
			var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
			date.forEach((item, index) => { // 循坏日期
				var f = new Date(item)
				var week = f.getDay() // 计算出星期几
				var str1 = item.split('/')
				var strs = str1[1] + '/' + str1[2]
				var weeks = weekday[week] /* 将计算出来的时间带入数字得出中文 */
				var time = Math.round(new Date(item) / 1000) // 时间戳转换
				var s = {} //用于存储每个日期对象
				s.date = item
				s.name = strs
				s.week = weeks
				s.times = time
				pkc.push(s)
			})
			this.same_week = pkc
			this.reserveDate = pkc[0].date
			// pkc存储着今天的年月日星期几，时间戳等
			this.same_day = pkc[0].date // 今天的数据
		},
		onLoad(options) {
			if (options.transferData) {
				this.chooseData = JSON.parse(decodeURIComponent(options.chooseData))
				this.transferData = JSON.parse(decodeURIComponent(options.transferData))
				console.log('跳转下单的数据',this.chooseData, this.transferData)
				this.getTime()
			}
		},
		methods: {
			getTime() {
				this.isLoading = true
				const params = {
					id: this.transferData.id,
					date: this.same_day.split('/').join('-')
				}
				api_technician.fetchTechnicianTime(params).then((res) => {
					this.isLoading = false
					this.timeDesData = res.data
					this.getReserveTime(true)
				}).catch(err => {
					this.isLoading = false
				})
			},
			getReserveTime(isTody) {
				const now = new Date()
				const hour = now.getHours()
				const minute = now.getMinutes()
				const greaterMinute = []
				const greaterHour = []
				if (!isTody) {
					this.activeTimeIndex = 0
					this.firstTimeIndex = 0
					this.reserveTime = this.timeDesData[0].time
					return
				}
				this.timeDesData.forEach((item, index) => {
					const itemHour = Number(item.time.split(':')[0])
					const itemMinute = Number(item.time.split(':')[1])
					if (itemHour === hour) {
						if (itemMinute >= minute) {
							greaterMinute.push({
								timeData: item.time,
								index
							})
						}
					}
					if (itemHour >= hour) {
						greaterHour.push(item.time)
					}
					if (greaterHour.length === 0) {
						this.activeTimeIndex = -1
						return
					}
					if (greaterMinute.length) {
						this.reserveTime = greaterMinute[0].timeData
						this.activeTimeIndex = greaterMinute[0].index
						this.firstTimeIndex = greaterMinute[0].index
					} else {
						if (itemHour === (hour + 1) && itemMinute === 0) {
							this.reserveTime = item.time
							this.activeTimeIndex = index
							this.firstTimeIndex = index
						}
					}
				})
			},
			bindChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
			},
			getDay(day) {
				var today = new Date()
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day
				today.setTime(targetday_milliseconds) //注意，这行是关键代码
				var tYear = today.getFullYear()
				var tMonth = today.getMonth()
				var tDate = today.getDate()
				tMonth = this.doHandleMonth(tMonth + 1)
				tDate = this.doHandleMonth(tDate)
				return `${tYear}/${tMonth > 9 ? tMonth : '0' + tMonth}/${tDate > 9 ? tDate : '0' + tDate}`
			},
			doHandleMonth(month) {
				var m = month
				if (month.toString().length == 1) {
					m = month
				}
				return m
			},
			dateSelect(item, index) {
				const now = new Date()
				const year = now.getFullYear()
				const month = now.getMonth() + 1
				const day = now.getDate()
				const nowDate = `${year}/${month > 9 ? month : '0' + month}/${day > 9 ? day : '0' + day}`
				this.activeIndex = index
				this.reserveDate = item.date
				if (nowDate === item.date) {
					this.getReserveTime(true)
				} else {
					this.getReserveTime(false)
				}
			},
			close() {
				this.show = false
			},
			timeSelectClick(item, index) {
				if (index < this.firstTimeIndex || this.activeTimeIndex === -1 || item.status !== '空闲') return
				this.activeTimeIndex = index
				this.reserveTime = item
			},
			toNext() {
				if (!this.reserveTime) {
					uni.showToast({
						title: '请选择预约时间',
						icon: 'none'
					})
					return
				}
				const transferData = {
					...this.transferData,
					reserveDate: this.reserveDate,
					reserveTime: this.reserveTime.time || this.reserveTime
				}
				const chooseData = [{
					...transferData,
					subscribeStartTime: this.reserveDate + ' ' + this.reserveTime,
				
				}]
				
				const params = encodeURIComponent(JSON.stringify(chooseData))
				const params2 = encodeURIComponent(JSON.stringify(transferData))
				console.log(chooseData, transferData)
				// uni.navigateTo({
				// 	url: `/subPages/technician/chooseProject?transferData=${params}`
				// })
				// uni.navigateTo({
				// 	url: `/subPages/home/confirmOrder?chooseData=${params}&transferData=${params2}`
				// })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.quantum {
		display: flex;
		padding: 20rpx 30rpx;
		justify-content: space-between;

		.item {
			width: 4%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.time {
				width: 90%;
				height: 6rpx;
				opacity: 1;
				background: rgba(229, 229, 229, 1);
			}

			.number {
				font-size: 18rpx;
				font-weight: 500;
				color: rgba(166, 166, 166, 1);
				margin-top: -30rpx;
			}
		}
	}

	.preview-time {
		display: flex;
		padding-left: 40rpx;
		margin-top: -40rpx;
		padding-bottom: 40rpx;

		.shape {
			width: 20rpx;
			height: 6rpx;
			opacity: 1;
			transform: translateY(15rpx);
			margin-right: 5rpx;
		}

		.text {
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(128, 128, 128, 1);
			margin-right: 40rpx;
		}
	}

	.popup-title {
		padding: 30rpx 35rpx 40rpx;
		display: flex;
		justify-content: space-between;

		.close {
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(128, 128, 128, 1);
			margin-top: 7rpx;
		}

		.title {
			font-size: 32rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 1);
		}

		.submit {
			font-size: 24rpx;
			font-weight: 500;
			color: rgba(194, 126, 21, 1);
			margin-top: 7rpx;
		}
	}

	.popup-box {
		padding: 0 35rpx;

		.popup-list {
			display: flex;
			flex-wrap: wrap;

			.item {
				width: 33.3%;
				height: 140rpx;
				opacity: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 25rpx;

				.list {
					width: 90%;
					height: 100%;
					border-radius: 10px;

					.time {
						font-size: 32rpx;
						font-weight: 500;
						height: 45rpx;
					}

					.word {
						font-size: 20rpx;
						font-weight: 500;
						height: 28rpx;
					}
				}

				.active-time {
					background: rgba(194, 126, 21, 1);
				}

				.no-active-time {
					background: rgba(255, 255, 255, 1);
					border: 1px solid rgba(166, 166, 166, 1);
				}
			}
		}
	}

	.contain {
		padding: 32rpx 40rpx 100rpx 37rpx;
	}

	.top-box {
		width: 100%;
		background: #FFFFFF;
		border-radius: 17rpx;
		opacity: 1;
		padding: 20rpx 60rpx 20rpx 47rpx;
		display: flex;
		margin-bottom: 24rpx;

		img {
			width: 130rpx;
			height: 130rpx;
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			opacity: 1;
		}

		.top-text {
			margin-left: 20rpx;

			.title {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 13rpx;
			}

			.text {
				font-size: 22rpx;
				font-weight: 400;
				color: #666666;
				margin-bottom: 13rpx;
			}
		}

	}

	.time-box {
		width: 100%;
		background: #FFFFFF;
		border-radius: 17rpx;
		opacity: 1;
		padding-top: 20rpx;

		.date-box {
			width: 100%;
			display: flex;
			flex-wrap: nowrap;
			white-space: nowrap;
			padding-left: 30rpx;
			border-bottom: 8rpx solid #f6f6f6;
			padding-bottom: 20rpx;

			.date-item {
				width: 100rpx;
				height: 100rpx;
				border-radius: 17rpx;
				display: inline-flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 0 10rpx;

				.day {
					font-size: 30rpx;
				}

				.week {
					font-size: 20rpx;
				}
			}

			.active {
				background: rgba(194, 126, 21, 1);
				box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
				color: rgba(255, 255, 255, 1);
			}

			.no-active {
				color: rgba(56, 56, 56, 1);
				background-color: #fff;
			}
		}

		.choose-time {
			padding: 0 40rpx;
			display: flex;
			justify-content: space-between;
			font-size: 32rpx;
			font-weight: 500;
			letter-spacing: 0px;
			line-height: 44.8px;
			color: rgba(56, 56, 56, 1);

			.begin-time {
				width: 170rpx;
				height: 50rpx;
				opacity: 1;
				background: rgba(243, 243, 243, 1);
				font-size: 24rpx;
				font-weight: 500;
				line-height: 50rpx;
				color: rgba(194, 126, 21, 1);
				text-align: center;
				margin-top: 15rpx;
			}

			.end-time {
				width: 160rpx;
				height: 50rpx;
				opacity: 1;
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(229, 229, 229, 1);
				font-size: 24rpx;
				font-weight: 500;
				line-height: 50rpx;
				color: rgba(128, 128, 128, 1);
				text-align: center;
				margin-top: 15rpx;
			}
		}

		.time-data {
			display: flex;
			flex-wrap: wrap;
			margin-top: 10rpx;

			.time-des {
				width: 16.6%;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 24rpx;
				font-weight: 500;
				// letter-spacing: 0px;
				// line-height: 33.6px;
				// color: rgba(128, 128, 128, 1);
			}
		}
	}

	.picker-view {
		height: 500rpx;
		margin-left: 44rpx;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.preview {
		opacity: 1;
		border-radius: 17rpx;
		background: rgba(255, 255, 255, 1);
		padding: 26rpx 0 34rpx 39rpx;
		margin-bottom: 24rpx;

		.title {
			position: relative;
			width: 100%;
			margin-left: -39rpx;
			margin-bottom: 20rpx;

			.box-line {
				position: absolute;
				left: 0;
				top: 0;
				width: 15rpx;
				height: 48rpx;
				opacity: 1;
				background: rgba(194, 126, 21, 1);

			}

			.text {
				margin-left: 44rpx;
				font-size: 38rpx;
				font-weight: 500;
				display: flex;
				justify-content: space-between;
				color: rgba(0, 0, 0, 1);

				.text-choose {
					font-size: 26rpx;
					font-weight: 400;
					line-height: 50rpx;
					color: rgba(194, 126, 21, 1);
				}
			}

			.time-list {
				width: 90%;
				opacity: 1;
				padding: 15rpx;
				background: rgba(204, 204, 204, 0);
				margin-left: 50rpx;
				margin-top: 40rpx;
				border: 1rpx solid rgba(229, 229, 229, 1);
				font-size: 30rpx;
				font-weight: 500;
				letter-spacing: 5rpx;
				color: rgba(128, 128, 128, 1);
				text-align: center;
			}
		}

		.container {
			margin-right: 39rpx;

			.inform {
				font-size: 24rpx;
				font-weight: 400;
				color: #FE2C2C;
				margin-bottom: 24rpx;
			}

			.date {
				display: flex;
				line-height: 50rpx;

				.left-date {
					width: 20%;
					line-height: 50rpx;

					.date {
						line-height: 50rpx;
						font-size: 26rpx;
						font-weight: 400;
						color: #000000;
					}
				}

				.right-date {
					width: 80%;
					line-height: 50rpx;

					.time {
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						// margin-top: 17rpx;
						line-height: 50rpx;

						.time-item {
							width: 33.3%;
							font-size: 26rpx;
							font-weight: 400;
							line-height: 50rpx;
							color: #666666;
						}
					}
				}
			}
		}
	}
</style>